<template>
  <view class="scene-photo-container" v-if="room_list.length > 0">
    <button @click="clickExit">
      <image src="https://oss.hkrin.com/other_img/exit.png" mode="widthFix" class="exit"
        ></image>
    </button>
    <div id="viewer"></div>

    <view class="btn-container" v-if="cur_room.intro.length > 0">
      <image v-if="!showIntroCard && !showQuestionCard" @click="onClickIntro" src="https://oss.hkrin.com/other_img/content_intro.jpg"
        mode="widthFix" class="intro-image"></image>
    </view>

      <view class="arrow-view-left" v-if="cur_room.backward" @click="clickBackward">
        <svg t="1670413974189" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1241" width="25" height="25"><path d="M684.408675 959.148993c-26.192545 0-52.375881-9.988492-72.359005-29.971615L267.23232 584.357981c-39.963177-39.963177-39.963177-104.754832 0-144.716986L612.04967 94.822622c39.963177-39.963177 104.754832-39.963177 144.718009 0 39.963177 39.962154 39.963177 104.754832 0 144.716986L484.308311 512 756.76768 784.459369c39.963177 39.963177 39.963177 104.754832 0 144.718009C736.788649 949.155385 710.594057 959.148993 684.408675 959.148993z" p-id="1242" fill="#ffffff"></path></svg>
      </view>
      <view class="arrow-view-right" v-if="cur_room.forward" @click="clickForward">
        <svg t="1670413994489" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1491" width="25" height="25"><path d="M339.590302 959.148993c-26.188452 0-52.377928-9.990538-72.357981-29.971615-39.963177-39.963177-39.963177-104.754832 0-144.718009l272.459369-272.459369L267.23232 239.539608c-39.963177-39.962154-39.963177-104.754832 0-144.716986 39.962154-39.963177 104.754832-39.963177 144.716986 0l344.818373 344.818373c39.963177 39.962154 39.963177 104.753809 0 144.716986L411.949306 929.177378C391.96823 949.158455 365.779777 959.148993 339.590302 959.148993z" p-id="1492" fill="#ffffff"></path></svg>
      </view>
      
    <video-card v-if="showVideo" @videoEnded="videoEnded"></video-card>
    <question-card  v-if="showQuestionCard" :questionList="question_list" :scene_bg="scene.card_bg" :scene_name="scene.scene_name" @questionEnd="questionEnd"></question-card>
    <intro-card v-if="showIntroCard" :hasQuestions="cur_room.question_list.length > 0" :scene_name="scene.scene_name" @clickClose="introClose"
      @clickTest="clickTest" :intros="this.cur_room.intro" :scene_bg="scene.card_bg"></intro-card>

    <!-- <imgga src="@/static/scene_host.png" alt=""> -->
      <image style="z-index:99999; position: fixed; right: 60px; bottom: 30px; width:50px" mode="widthFix" src="../../static/scene_host.png"></image>
  </view>

</template>
<script>
import { Viewer } from "@photo-sphere-viewer/core";
import "@photo-sphere-viewer/core/index.css";
import { MarkersPlugin } from "@photo-sphere-viewer/markers-plugin";
import "@photo-sphere-viewer/markers-plugin/index.css";
import VideoCard from "../../components/video-card/index.vue";
import QuestionCard from "../../components/question-card/index.vue";
import IntroCard from "../../components/intro-card/index.vue";
import roomData from "../../static/json/rooms.json";
import markerData from "../../static/json/room_markers.json";
import questionData from "../../static/json/question.json";

export default {
  name: "photo-sphere-page",
  components: {
    VideoCard,
    QuestionCard,
    IntroCard,
  },
  props: {
    scene: {
      type: Object,
      default: null,
    }
  },
  data() {
    return {
      viewer: "",
      // scene: null,
      room_list: [],
      cur_room: null,
      showVideo: false,
      showAudio: false,
      showQuestionCard: false,
      showIntroCard: false,
      question_list: [],
      markers: [],
      showDirections: true,
    };
  },

  methods: {

    clickForward() {
      var marker_id = this.cur_room.forward;
      this.goToMarker(marker_id);
    },

    clickBackward() {
      var marker_id = this.cur_room.backward;
      this.goToMarker(marker_id);
    },

    goToMarker(marker_id) {
      const markersPlugin = this.viewer.getPlugin(MarkersPlugin);
      this.hideAllMarkers();
      var localMarker = this.fetchRoomByMarkId(marker_id);
      if (!localMarker) {
        return;
      }
      for (const room of this.room_list) {
        if (room.room_id == localMarker.target_room_id) {
          this.cur_room = room;
          //https://oss.hkrin.com/rooms/room_6-min.jpg
          this.viewer.setPanorama('https://oss.hkrin.com/rooms/' + room.url, { yaw: 6.232589417434965, pitch: 0.07016253709436304 }, true).then(() => {
            for (let i = 0; i < room.mark.length; i++) {
              markersPlugin.showMarker(room.mark[i]);
            }
          })
          break;
        }
      }
      this.viewer.zoom(0)//改变缩放
    },

    initViewer() {
      this.$nextTick(function () {
        this.viewer = new Viewer({
          container: document.querySelector("#viewer"),
          panorama: 'https://oss.hkrin.com/rooms/' + this.room_list[0].url,
          size: {
            width: "100vw",
            height: "100vh",
          },
          autorotateLat: 0,//
          autorotateSpeed: 0,//自传速度
          defaultZoomLvl: 0,//默认缩放
          defaultYaw: 0.0027446609001040845,//经度
          defaultPitch: 0.015220228499811306,//维度
          autorotateDelay: 1,//1毫秒后启动自动旋转
          plugins: [
            [
              MarkersPlugin,
              {
                markers: this.markers
              },
            ],
          ],
        });

        // 初始化之后，可以使用getPlugin方法获得插件实例，从而允许在插件上调用方法并订阅事件
        const markersPlugin = this.viewer.getPlugin(MarkersPlugin);
        // 启用/禁用自动旋转时触发
        this.viewer.addEventListener('autorotate', (e, enabled) => {
          if (!enabled) {
            setTimeout(() => {
              this.viewer.toggleAutorotate();//开启自动旋转/不旋转 
            }, 5000);
          }
        });
        // 监听点击marker
        markersPlugin.addEventListener("select-marker", ({ marker }) => {
          console.log('select-marker :', marker);
          const markerid = marker.id;

          this.viewer
            // 动画
            .animate({
              yaw: marker.config.yaw,
              pitch: marker.config.pitch,
              zoom: 100,
              speed: "-10rpm",
            })

            .then(() => {
              // markersPlugin.hideMarker(marker.id);//隐藏点击的marker
              this.hideAllMarkers();
              var localMarker = this.fetchRoomByMarkId(marker.id);
              if (!localMarker) {
                return;
              }
              for (const room of this.room_list) {
                if (room.room_id == localMarker.target_room_id) {
                  this.cur_room = room;
                  this.viewer.setPanorama('https://oss.hkrin.com/rooms/' + room.url, { yaw: 6.232589417434965, pitch: 0.07016253709436304 }, true).then(() => {
                    for (let i = 0; i < room.mark.length; i++) {
                      markersPlugin.showMarker(room.mark[i]);
                    }
                  })
                  break;
                }
              }
              this.viewer.zoom(0)//改变缩放
            });
        });
      })

    },

    questionEnd() {
      this.showQuestionCard = false;
    },

    fetchRoomQuestion() {
      const quetions = questionData;
      var cur_room_questions = [];
      this.cur_room.question_list.forEach((item, index) => {
        for (let i = 0; i < quetions.length; i++) {
          if (quetions[i].question_id == item) {
            cur_room_questions.push(quetions[i]);
          }
        }
      });
      this.question_list = cur_room_questions;

      this.showQuestionCard = true;
    },

    fetchRoomList() {
      var room_ids = this.scene.rooms;
      var rooms = roomData;

      this.room_list = [];
      rooms.forEach(room => {
        room_ids.forEach(id => {
          if (room.room_id == id) {
            this.room_list.push(room);
          }
        });
      });
      if (this.room_list.length == 0) {
        return;
      }
      this.cur_room = this.room_list[0];
      this.makeMarkers();
    },

    makeMarkers() {
      const roomMarkers = markerData;
      var tmpMarkList = [];
      this.room_list.forEach((room, index) => {
        tmpMarkList = [...tmpMarkList, ...room.mark];
      });
      tmpMarkList = this.unique(tmpMarkList);
      var forwardTag = '<svg t="1670416966125" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="85655" width="35" height="35"><path d="M73.6256 546.3552l442.9312-442.9824 442.9312 442.9824a33.3312 33.3312 0 0 0 47.104-47.104L540.1088 32.768a33.4336 33.4336 0 0 0-23.552-9.728 32.9216 32.9216 0 0 0-6.3488 0.6144 33.4336 33.4336 0 0 0-17.2032 9.1136L26.5216 499.2512a33.3312 33.3312 0 0 0 47.104 47.104z" p-id="85656" fill="#ffffff"></path><path d="M540.1088 496.1792a33.28 33.28 0 0 0-47.104 0L26.5216 962.56a33.28 33.28 0 0 0 47.104 47.0528l442.9312-442.9824 442.9312 442.9824a33.28 33.28 0 0 0 47.104-47.0528z" p-id="85657" fill="#ffffff"></path></svg>';
      tmpMarkList.forEach((mark_id) => {
        for (let i = 0; i < roomMarkers.length; i++) {
          if (roomMarkers[i].marker_id == mark_id) {
            var html = '<div style="background-color: rgba(0, 0, 0, 0.5); padding: 8px 15px;border-radius:8px;">' + roomMarkers[i].room_name + '</div><div>'+ forwardTag +'</div>';
            var marker = {
              id: mark_id,
              tooltip: roomMarkers[i].room_name, //提示的内容
              html: html,
              anchor: "bottom right",
              scale: [0.5, 1.5],
              style: {
                maxWidth: "150px",
                color: "rgba(255,255,255,1)",
                fontSize: "30px",
                fontFamily: "Helvetica, sans-serif",
                textAlign: "center",
                
              },
              yaw: roomMarkers[i].long, //位置
              pitch: roomMarkers[i].lat, //位置
              visible: false,
            };
            this.markers.push(marker);
            break;
          }
        }
      })

      this.markers.forEach((marker) => {
        if (this.room_list[0].mark.includes(marker.id)) {
          marker.visible = true;
        }
      });

      this.initViewer();
    },

    unique(arr) {
      return arr.filter(function (item, index, arr) {
        //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素 
        return arr.indexOf(item, 0) === index;
      });
    },

    hideAllMarkers() {
      // markersPlugin.hideMarker(marker.id)
      const markersPlugin = this.viewer.getPlugin(MarkersPlugin);
      this.markers.forEach(element => {
        markersPlugin.hideMarker(element.id);
      });
    },

    fetchRoomByMarkId(mark_id) {
      const roomMarkers = markerData;
      for (let i = 0; i < roomMarkers.length; i++) {
        if (roomMarkers[i].marker_id == mark_id) {
          return roomMarkers[i];
        }
      }
      return null;
    },

    onClickVideo() {
      this.showVideo = true;
    },

    onClickText() {

    },

    onClickIntro() {
      console.log(this.cur_room.intro[0].content);
      this.showIntroCard = true;
    },

    introClose() {
      this.showIntroCard = false;
    },

    clickTest() {
      this.showIntroCard = false;
      this.fetchRoomQuestion();
    },

    clickExit() {
      this.$emit('exit');
    },

    videoEnded() {
      console.log('video has Ended');
      this.showVideo = false;
      this.showAudio = false;
      this.showQuestionCard = true;
    },

  },

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    this.fetchRoomList();
  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() { },
  // 组件周期函数--监听组件数据更新之后
  updated() { },
  // 组件周期函数--监听组件激活(显示)
  activated() { },
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() { },
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() { },

};
</script>

<style lang="scss">

.psv-navbar {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
          visibility: hidden;
}
.scene-photo-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

.btn-container {
  z-index: 9999;
  position: fixed;
  bottom: 10px;
  width: 100%;
  height: 19px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .intro-image {
    width: 110px;
  }
}

.direction-container {
  z-index: 9999;
  position: fixed;
  top: 30%;
  left: 10px;
  right: 10px;
  bottom: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  // background-color: red;

  .arrow-view {
    padding: 10px 10px;
    background-color: rgba(0, 0, 0, 0.442);
    border-radius: 6px;
  };
}

.arrow-view-left {
  z-index: 9999;
  top: 40%;
  position: fixed;
  left: 10px;
    padding: 10px 10px;
    background-color: rgba(0, 0, 0, 0.442);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
  };

.arrow-view-right {
  z-index: 9999;
  top: 40%;
  position: fixed;
  right: 10px;
  padding: 10px 10px;
    background-color: rgba(0, 0, 0, 0.442);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 30px 8px 30px;
  background-color: white;
  margin-left: 20px;
  border-radius: 8px;
}

.exit {
  z-index: 9999;
  position: fixed;
  top: 32px;
  left: 52px;
  width: 32px;
  height: 32px;
}
</style>